<template>
    <div>
        <a-menu
                :defaultSelectedKeys="defaultSelectedKeys"
                :defaultOpenKeys="defaultOpenKeys"
                mode="inline"
                :theme="theme"
        >
            <template v-for="(item,index) in list">
                <a-menu-item
                        @click="menuItem(item,0)"
                        v-if="!item.children&&!item.hidden"
                        :key="item.key"
                >
                    <icon-font v-if="item.icon" :type="item.icon?item.icon:''"/>
                    <span>{{ $language(item.title)}}</span>
                </a-menu-item>
                <sub-menu @commonPanes="commonPanes" v-else :menu-info="item" :key="item.key"/>
            </template>
        </a-menu>
    </div>
</template>
<script lang='ts'>
    import {Component, Vue, Watch} from "vue-property-decorator";
    import SubMenu from "./SubMenu.vue";
    import {namespace} from "vuex-class";

    const module = namespace("tabs");
    const sessionStorage = namespace("sessionStorage");
    const myBusiness = namespace("myBusiness");

    @Component({
        components: {
            "sub-menu": SubMenu
        }
    })
    export default class MenuSilder extends Vue {
        @module.Mutation("SET_PANES") setPanes;
        @module.State("JumpAddress") JumpAddress;
        @sessionStorage.State("itemRoute") itemRoute;
        @module.Mutation("SET_JUMPADDRESS") setJumpAddress;
        @myBusiness.State("Routeskey") Routeskey;
        theme: string = "light"; //light dark
        current: string = "1";
        // selectedKeys: string[] = [];  //当前选中的菜单项 key 数组
        defaultSelectedKeys: Array<string> = []; //默认选中的key
        defaultOpenKeys: Array<string> = []; //默认打开的key
        list: any[] = [];

        menuItem(val) {
            this.commonPanes(val, false, false);
            this.$router.push({
                name: val.name,
            });
        }

        commonPanes(item: any, close: boolean, status: boolean): void {
            const _this: any = this;
            this.setJumpAddress(item.name);
            const panes = {
                title: _this.$language(item.title),
                name: item.name,
                key: item.key,
                closable: close ? false : true
            };
            this.setPanes([panes]);
        }

        async created() {
            const _this: any = this;
            this.list = this.itemRoute;
            const item = this.itemRoute[0];
            this.commonPanes(item, true, true);
            let select = item.key;
            let open = item.key;
            if (this.Routeskey) {
                this.commonPanes(this.Routeskey.routes, false, false);
                select = this.Routeskey.defaultSelect;
                open = this.Routeskey.defaultOpen;
            }
            this.defaultSelectedKeys.push(select);
            this.defaultOpenKeys.push(open);
        }
    }
</script>
<style lang="less" scoped>
</style>
